// pages/main-music/main-music.js
import {
  getMusicBanner,
  getPlayListDetail,
  getSongMenuList
} from '../../services/music'

import recommendStore from "../../store/recommendStore"
import rankingStore from "../../store/rankingStore"
import plarerStore from "../../store/playerStore"

import {
  querySelect
} from "../../utils/query-select"

import throttle from '../../utils/throttle'
import playerStore from '../../store/playerStore'

const querySelectThrottle = throttle(querySelect)
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchValue: '',
    banners: [],
    bannerHeight: 150,
    screenWidth: 375,

    recommendSongs: [],

    //歌单数据
    hotMenuList: [],
    recMenuList: [],

    //榜单数据
    isRankingData: false,
    rankingInfos: {},

    //当前正在播放的歌曲信息
    currentSong: {},

    isPlaying: false
  },

  onLoad() {
    this.fetchMusicBanner()
    this.fetchSongMenuList()

    // playerStore.dispatch("playMusicWithSongIdAction", 1307463441)

    //发起action
    recommendStore.onState("recommendSongInfo", this.handleRecommendSongs)
    recommendStore.dispatch("fetchRecommendSongsAction")
    rankingStore.onState("newRanking", this.handleNewRanking)
    rankingStore.onState("originRanking", this.handleOriginRanking)
    rankingStore.onState("upRanking", this.handleUpRanking)
    rankingStore.dispatch("fetchRankingDataAction")

    playerStore.onStates(["currentSong", "isPlaying"], this.handlePlayInfos)

    //获取屏幕的尺寸
    this.setData({
      screenWidth: app.globalData.screenWidth
    })
  },

  //网络请求
  async fetchMusicBanner() {
    const res = await getMusicBanner()
    this.setData({
      banners: res.banners
    })
  },
  async fetchSongMenuList() {
    getSongMenuList().then(res => {
      this.setData({
        hotMenuList: res.playlists
      })
    })

    getSongMenuList("热门").then(res => {
      this.setData({
        recMenuList: res.playlists
      })
    })

  },

  // 界面的事件监听函数
  onSearchClick() {
    wx.navigateTo({
      url: '/pages/detail-search/detail-search'
    })
  },
  onBannerImageLoad(event) {
    //获取image组件的高度
    querySelectThrottle(".banner-image").then(res => {
      this.setData({
        bannerHeight: res[0].height
      })
    })
  },
  onRecommendMoreClick() {
    wx.navigateTo({
      url: '/pages/detail-song/detail-song?type=recommend',
    })
  },
  onSongItemTap(event) {
    const index = event.currentTarget.dataset.index
    plarerStore.setState("playSongList", this.data.recommendSongs)
    plarerStore.setState("playSongIndex", index)
  },
  onPlayOrPauseTap() {
    playerStore.dispatch("changeMusicStatusAction")
  },
  onPlayBarAlbumTap() {
    wx.navigateTo({
      url: '/packagePlayer/pages/music-player/music-player',
    })
  },

  //从store中获取数据
  handleRecommendSongs(value) {
    if (!value.tracks) return

    this.setData({
      recommendSongs: value.tracks.slice(0, 6)
    })
  },

  handleNewRanking(value) {
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      newRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },
  handleOriginRanking(value) {
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      originRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },
  handleUpRanking(value) {
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      upRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },

  handlePlayInfos({ currentSong, isPlaying }) {
    if (currentSong) {
      this.setData({ currentSong })
    }
    if (isPlaying !== undefined) {
      this.setData({ isPlaying })
    }

  },

  onUnload() {
    recommendStore.offState("recommedSongs", this.handleRecommendSongs)
    rankingStore.offState("newRanking", this.handleNewRanking)
    rankingStore.offState("originRanking", this.handleOriginRanking)
    rankingStore.offState("upRanking", this.handleUpRanking)
    playerStore.offStates(["currentSong", "isPlaying"], this.handlePlayInfos)
  }




})